<template>
    <div class="edit-img-right">
        <div class="edit-top-list" v-if="val">
            <Tooltip content="上移">
                <Icon
                    type="md-arrow-round-up"
                    @click="moveUp"
                    style="font-size: 30px"
                />
            </Tooltip>
            <Tooltip content="下移">
                <Icon
                    type="md-arrow-round-down"
                    @click="moveDown"
                    style="font-size: 30px"
                />
            </Tooltip>
            <Tooltip content="复制">
                <Icon type="md-copy" style="font-size: 30px" @click="copy" />
            </Tooltip>
            <Tooltip :content="drag ? '锁定' : '解锁'">
                <Icon
                    :type="drag ? 'md-unlock' : 'md-lock'"
                    style="font-size: 30px"
                    @click="setEditType"
                />
            </Tooltip>
            <Tooltip content="删除">
                <Icon
                    type="md-trash"
                    @click="deleteDom"
                    style="font-size: 30px"
                />
            </Tooltip>
        </div>
        <div v-for="(item, index) in list" :key="`editRightList${index}`">
            <div
                class="list"
                v-if="
                    item.type == 'slider' &&
                    item.valType != 'opacity' &&
                    item.valType != 'borderRadius'
                "
            >
                <Row>
                    <Col span="8">
                        <div class="title">
                            {{ item.title }}
                        </div>
                    </Col>
                    <Col span="15">
                        <div>
                            <Slider
                                v-model="item.val"
                                alpha
                                show-input
                                @on-change="
                                    (val) => {
                                        rotateZChange(val, item);
                                    }
                                "
                                style="width: 200px"
                            />
                        </div>
                    </Col>
                    <Col span="1">
                        <div style="line-height: 40px">%</div>
                    </Col>
                </Row>
            </div>
        </div>
        <div
            style="margin-left: 10px"
            v-show="list.length && val && val.type == 'text'"
        >
            文字属性：
        </div>
        <div
            style="margin-left: 10px"
            v-show="list.length && val && val.type == 'img'"
        >
            图片编辑：
        </div>
        <div v-for="(item, index) in list" :key="`editRightList2${index}`">
            <div class="list" v-if="item.valType != 'rotateZ'">
                <Row>
                    <Col span="8">
                        <div class="title">
                            {{ item.title }}
                        </div>
                    </Col>
                    <Col span="15">
                        <!-- 字体选择 -->
                        <Select
                            v-model="item.val"
                            style="width: 222px"
                            v-if="
                                item.type == 'select' &&
                                item.valType == 'fontFamily'
                            "
                            @on-change="
                                (val) => {
                                    valChange(val, item);
                                }
                            "
                        >
                            <Option :value="'Arial, Helvetica, sans-serif'">
                                系统默认字体
                            </Option>
                            <Option :value="'Regular'">
                                思源黑体Regular
                            </Option>
                            <Option :value="'Heavy'"> 思源黑体Heavy </Option>
                            <Option :value="'Medium'"> 思源黑体Medium </Option>
                        </Select>
                        <!-- 字号 -->
                        <div style="display: flex">
                            <Select
                                v-model="item.val"
                                v-if="
                                    item.type == 'select' &&
                                    item.valType == 'fontSize'
                                "
                                @on-change="
                                    (val) => {
                                        valChange(val, item);
                                    }
                                "
                                filterable
                                allow-create
                                @on-create="handleCreate2"
                            >
                                <Option
                                    v-for="(
                                        fontItem, fontItemIndex
                                    ) in fontSizeList"
                                    :value="fontItem"
                                    :key="`fontSizeList${fontItemIndex}`"
                                >
                                    {{ fontItem }}
                                </Option>
                            </Select>
                            <ColorPicker
                                style="margin-left: 10px"
                                v-model="val.color"
                                v-if="
                                    item.type == 'select' &&
                                    item.valType == 'fontSize'
                                "
                                alpha
                                @on-change="
                                    (val) => {
                                        valChange(val, item);
                                    }
                                "
                                :transfer="true"
                            />
                            <ColorPicker
                                v-if="item.type == 'setIconColor'"
                                @on-change="
                                    (val) => {
                                        setIconColor(val, item);
                                    }
                                "
                                v-model="iconColor"
                            />
                            <div>
                                <Slider
                                    v-model="item.val"
                                    alpha
                                    show-input
                                    @on-change="
                                        (val) => {
                                            opacityChange(val, item);
                                        }
                                    "
                                    v-if="
                                        item.type == 'slider' &&
                                        item.valType == 'opacity'
                                    "
                                    style="width: 200px"
                                />
                            </div>
                            <div>
                                <Slider
                                    v-model="item.val"
                                    alpha
                                    show-input
                                    @on-change="
                                        (val) => {
                                            borderRadiusChange(val, item);
                                        }
                                    "
                                    v-if="
                                        item.type == 'slider' &&
                                        item.valType == 'borderRadius'
                                    "
                                    style="width: 200px"
                                />
                            </div>
                        </div>
                    </Col>
                    <Col v-if="item.type == 'slider'" :span="1">
                        <div style="line-height: 40px">%</div>
                    </Col>
                </Row>
            </div>
        </div>
        <div class="edit-top-list" v-if="val && val.type == 'text'">
            <Tooltip content="左对齐" :transfer="true">
                <img
                    src="~@/assets/font-left-active.png"
                    class="img-icon"
                    v-if="textAlign == 'left'"
                />
                <img
                    src="~@/assets/font-left.png"
                    class="img-icon"
                    v-if="textAlign != 'left'"
                    @click="setTextAlgin('left')"
                />
            </Tooltip>
            <Tooltip content="居中" :transfer="true">
                <img
                    src="~@/assets/font-center-active.png"
                    class="img-icon"
                    v-if="textAlign == 'center'"
                />
                <img
                    v-else
                    src="~@/assets/font-center.png"
                    class="img-icon"
                    @click="setTextAlgin('center')"
                />
            </Tooltip>
            <Tooltip content="右对齐" :transfer="true">
                <img
                    src="~@/assets/font-right-active.png"
                    class="img-icon"
                    v-if="textAlign == 'right'"
                />
                <img
                    v-else
                    src="~@/assets/font-right.png"
                    class="img-icon"
                    @click="setTextAlgin('right')"
                />
            </Tooltip>
            <Tooltip content="文字方向" :transfer="true">
                <img
                    src="~@/assets/font-top.png"
                    style="width: 20px"
                    @click="setFontTop"
                    v-if="!writingMode"
                />
                <img
                    src="~@/assets/font-top-active.png"
                    style="width: 20px"
                    @click="setFontTop"
                    v-if="writingMode"
                />
            </Tooltip>
        </div>
        <div class="edit-top-list" v-if="val && val.type == 'text'">
            <Tooltip content="加粗" :transfer="true">
                <img
                    src="~@/assets/font-bold-active.png"
                    class="img-icon2"
                    v-if="fontWeight == 'bold'"
                    @click="setFontFontWeight"
                />
                <img
                    src="~@/assets/font-bold.png"
                    class="img-icon2"
                    v-if="fontWeight != 'bold'"
                    @click="setFontFontWeight"
                />
            </Tooltip>
            <Tooltip content="斜体" :transfer="true">
                <img
                    src="~@/assets/font-oblique-active.png"
                    class="img-icon2"
                    v-if="fontStyle == 'oblique'"
                    @click="setFontStyle"
                />
                <img
                    v-else
                    src="~@/assets/font-oblique.png"
                    class="img-icon2"
                    @click="setFontStyle"
                />
            </Tooltip>
            <Tooltip content="下划线" :transfer="true">
                <img
                    src="~@/assets/font-underline-active.png"
                    class="img-icon2"
                    v-if="textDecoration == 'line-through'"
                    @click="setTextDecoration('')"
                />
                <img
                    v-if="textDecoration == '' || textDecoration == 'underline'"
                    src="~@/assets/font-underline.png"
                    class="img-icon2"
                    @click="setTextDecoration('line-through')"
                />
            </Tooltip>
            <Tooltip content="删除线" :transfer="true">
                <img
                    src="~@/assets/font-delete-active.png"
                    style="width: 30px"
                    v-if="textDecoration == 'underline'"
                    @click="setTextDecoration('')"
                />
                <img
                    src="~@/assets/font-delete.png"
                    style="width: 30px"
                    @click="setTextDecoration('underline')"
                    v-if="
                        textDecoration == '' || textDecoration == 'line-through'
                    "
                />
            </Tooltip>
        </div>
    </div>
</template>

<script>
import imgEditForm from "./imgEditForm.js";
const fontSizeList = [
    6, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 32, 36, 48, 60, 72,
];
export default {
    data() {
        return {
            list: [],
            id: "",
            drag: true,
            fontSizeList: fontSizeList,
            val: null,
            textAlign: "",
            writingMode: "",
            fontWeight: "",
            fontStyle: "",
            textDecoration: "",
            iconColor: "",
        };
    },
    methods: {
        borderRadiusChange(val) {
            this.$emit("borderRadiusChange", {
                val,
                id: this.val.id,
            });
        },
        setTextDecoration(val) {
            this.textDecoration = val;
            this.$emit("setTextDecoration", {
                val: this.textDecoration,
                id: this.val.id,
            });
        },
        setFontStyle() {
            if (this.fontStyle) {
                this.fontStyle = "";
            } else {
                this.fontStyle = "oblique";
            }
            this.$emit("setTextFontStyle", {
                val: this.fontStyle,
                id: this.val.id,
            });
        },
        setFontFontWeight() {
            if (this.fontWeight) {
                this.fontWeight = "";
            } else {
                this.fontWeight = "bold";
            }
            this.$emit("setTextFontWeight", {
                val: this.fontWeight,
                id: this.val.id,
            });
        },
        setFontTop() {
            if (this.writingMode) {
                this.writingMode = "";
            } else {
                this.writingMode = "vertical-lr";
            }
            this.$emit("setTextAlginTop", {
                val: this.writingMode,
                id: this.val.id,
            });
        },
        setTextAlgin(val) {
            this.textAlign = val;
            this.$emit("setTextAlgin", {
                val,
                id: this.val.id,
            });
        },
        handleCreate2(val) {
            this.fontSizeList.push(val);
        },
        setEditType() {
            if (!this.val) return;
            this.drag = !this.drag;
            this.$emit("canDragDom", {
                type: this.drag,
                id: this.val.id,
            });
        },
        copy() {
            if (!this.val) return;
            this.$emit("copyDom", this.val.id);
        },
        deleteDom() {
            if (!this.val) return;
            this.$emit("deleteDom", this.val.id);
            this.list = [];
            this.val = null;
        },
        moveUp() {
            if (!this.val) return;
            this.$emit("setZIndex", {
                id: this.val.id,
                type: "up",
            });
        },
        moveDown() {
            if (!this.val) return;
            this.$emit("setZIndex", {
                id: this.val.id,
                type: "down",
            });
        },
        // 点击画布中间的内容后，初始化编辑栏
        initData(val) {
            console.log(val);
            this.list = [];
            this.id = val.id;
            this.val = val;
            this.drag = val.drag;
            this.textAlign = val.textAlign;
            this.writingMode = val.writingMode;
            this.fontWeight = val.fontWeight;
            this.fontStyle = val.fontStyle;
            this.textDecoration = val.textDecoration;
            this.iconColor = val.iconColor || "";
            Object.keys(imgEditForm[val.type]).forEach((key) => {
                this.list.push({
                    type: imgEditForm[val.type][key],
                    val: val[key],
                    title: imgEditForm.DESC[key],
                    valType: key,
                });
            });
            // 如果该图标是矢量图，新增一个修改其矢量颜色的功能选项
            if (val.isIcon) {
                this.list.push({
                    type: "setIconColor",
                    val: "",
                    title: "修改矢量图颜色",
                    valType: "setIconColor",
                });
            }
        },
        // 值改变
        valChange(val, item) {
            this.$emit("itemChange", {
                id: this.id,
                ...item,
            });
        },
        // 旋转功能修改
        rotateZChange(val) {
            this.$emit("rotateZChange", {
                val,
                id: this.val.id,
            });
        },
        opacityChange(val) {
            this.$emit("fontOpacityChange", {
                val,
                id: this.val.id,
            });
        },
        setIconColor(val, item) {
            // 将获取的颜色转为数组输出
            const hex2Rgb = (bgColor) => {
                let color = bgColor.slice(1); // 去掉'#'号
                let rgb = [
                    parseInt("0x" + color.slice(0, 2)),
                    parseInt("0x" + color.slice(2, 4)),
                    parseInt("0x" + color.slice(4, 6)),
                ];
                return rgb;
            };
            this.iconColor = val;
            this.changeImageColor(this.val.src, hex2Rgb(val), (base64) => {
                this.$emit("setIconColor", {
                    base64,
                    id: this.val.id,
                    iconColor: val,
                });
            });
        },
        /**
         * 将png图片转成目标颜色
         * @param imgUrl 可传入图片URL 或者 Base64
         * @param RGBArr 要换成的目标颜色RGB 数组格式[R,G,B]
         * @param Functon callback回调
         */
        changeImageColor(imgUrl, RGBArr, callback) {
            let image = new Image();
            image.src = imgUrl;
            image.onload = function () {
                let newCanvas = document.createElement("canvas");
                let ctx = newCanvas.getContext("2d");

                newCanvas.width = image.width;
                newCanvas.height = image.height;

                ctx.drawImage(image, 0, 0, image.width, image.height);

                let imageData = ctx.getImageData(
                    0,
                    0,
                    newCanvas.width,
                    newCanvas.height
                );
                //imageData 则为图片内每个像素点的RGB信息
                for (let p = 0; p < imageData.data.length; p += 4) {
                    if (imageData.data[p + 3] !== 0) {
                        //判断当前像素点的A值不为0 (RGBA A为透明度) 则替换成目标颜色
                        imageData.data[p] = RGBArr[0];
                        imageData.data[p + 1] = RGBArr[1];
                        imageData.data[p + 2] = RGBArr[2];
                    }
                }
                ctx.putImageData(imageData, 0, 0);

                const dataUri = newCanvas.toDataURL("image/png");
                // 清除画布
                ctx.clearRect(0, 0, image.width, image.height);
                // 回调
                callback && callback(dataUri);
            };
        },
    },
};
</script>

<style lang="less" scoped>
.edit-img-right {
    width: 100%;
    height: 100%;
    .list {
        padding: 10px;
        .title {
            line-height: 36px;
        }
    }
}
.edit-top-list {
    width: 100%;
    align-items: center;
    justify-content: space-between;
    display: flex;
    border-bottom: 1px solid rgb(236, 236, 236);
    height: 50px;
    padding: 0 20px;
    cursor: pointer;
}
.img-icon {
    width: 30px;
    height: 30px;
}
.img-icon2 {
    width: 24px;
    height: 24px;
    margin-left: 3px;
}
</style>
